<template>
  <div>
    <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
      <div class="row">
        <el-form-item label="请选择月份" prop="months" class="col" v-if="this.selectedDates ==='month' ">
          <el-date-picker type="month" v-model="formData.months" format="MM" value-format="MM"
                          :style="{width: '50%'}" placeholder="请选择月份" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="请选择年份" prop="years" class="col" v-if="this.selectedDates ==='year' ">
          <el-date-picker type="year" v-model="formData.years" format="yyyy" value-format="yyyy"
                          :style="{width: '50%'}" placeholder="请选择年份" clearable></el-date-picker>
        </el-form-item>
      </div>
      <div class="row">
        <el-form-item label="请选择查询第几周" prop="weeks" class="col" v-if="this.selectedDates !== 'month' &&  this.selectedDates !== 'year'  ">
          <el-date-picker type="week" v-model="formData.weeks" format="第 WW 周" value-format="yyyy-MM-dd"
                          :style="{width: '23%'}" placeholder="请选择查询第几周" clearable></el-date-picker>
        </el-form-item>
      </div>
      <el-form-item size="large" v-if="this.selectedDates !=null">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {

  name: 'DateComponent',
  components: {},
  props: {
    selectedDates:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      formData: {
        years: null,
        months: null,
        weeks: null,
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        this.$emit('submit', this.formData); // 触发提交事件
      })
    },
    resetForm() {
      this.$emit('reset'); // 触发重置事件
      this.$refs['elForm'].resetFields();
    },
  }
}
</script>

<style>
.row {
  display: flex;
  justify-content: space-between;
}

.col {
  flex: 1;
  margin-right: 20px;
}

.col .el-date-picker {
  width: 50%;
}

.col:last-child {
  margin-right: 0;
}
</style>
